<template>
	<view>
		<template v-if="isShow === false">
			<view style="width: 750rpx; height: 100rpx; background: white; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; position: sticky; z-index: 2; top: 0;">
				<image v-if="isBack" @tap="toBack" src="../../../static/return.png" style="margin-right: 20rpx; width: 50rpx; height: 50rpx;" mode="aspectFit"></image>
				<view class="searchModel">
					<input type="text" @input="onKeyInput" v-model="inputValue" @focus="isFocus" @blur="noFocus" placeholder-style="font-size:30rpx;" placeholder="输入想要查看的养殖仓编号" />
					<text class="icon iconfont icon-search "></text>
				</view>
			</view>
			
			<view @touchmove.stop.prevent="moveHandle" v-if="isShowModel" class="menuModel">
				<scroll-view scroll-y="true" class="dataViewBox" v-if="isSearchResultShow">
					<template v-if="isSearch == true">
						<block v-for="(item,index) in searchResult" :key="index">
							<view @tap="chooseCheck(index)" style="border-top: 2rpx solid #EEEEEE; width: 750rpx; height: 80rpx; margin-top: 3rpx; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;">
								<text style="font-size: 32rpx; margin-left: 20rpx;">{{item.warehouse_serial_number}}</text>
								<image src="../../../static/jiantou1.png" style="margin-right: 20rpx; width: 50rpx; height: 50rpx;"></image>
							</view>
						</block>
					</template>
					<template v-else>
						<block>
							<view style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
								<text style="color: #C0C0C0; font-size: 32rpx;">搜索结果为空</text>
							</view>
						</block>
					</template>
				</scroll-view>
			</view>
			
			<!-- <feed-manager-line :person="person" :feedList="feedList" class="feedManagerLine"></feed-manager-line> -->
			<view class="pigHouse animated bounceInLeft slow" v-for="(item,index) in middleList" :key="index">
				<view class="head">
					<view style="margin-top: 20rpx;">
						<text style="border-left: #07D188 solid 12rpx; padding-left: 20rpx; font-weight: bold; font-size: 32rpx;">养殖仓：{{item.warehouse_serial_number}}</text>
					</view>
					
					<image src="../../../static/rear/pigstyAndHouse/editer.png" @click="goEditor(index)" style="height: 50rpx; width: 50rpx; margin-top: 20rpx;" mode="aspectFill"></image>
				</view>
				<view class="footer">
					<view class="houseLeft">
						<image src="../../../static/rear/feedManagement/timg1.jpg" mode="scaleToFill"/>
					</view>
					<view class="houseRight">
						<view style="display: flex; flex-wrap: wrap; margin-top: 50rpx; justify-content: flex-start; width: 335rpx;">
							
							<text style="font-weight: 300; width: auto;">使用饲料：</text>
							<text style="width: 160rpx; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{item.feed_name}}</text>
							
							
						</view>
						
						<view style="display: flex; flex-wrap: wrap; margin-bottom: 50rpx; width: 335rpx; align-items: center;">
							<text style="font-weight: 300; width: auto;">使用量：</text>
							<view style="width: 150rpx; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
								<text>{{item.feed_number}}</text>
							</view>
							<text style="width: 30rpx; white-space:nowrap;">KG</text>
						</view>
					</view>
				</view>
				<view class="remarks">
					<!-- <view>
						<text>创建人</text>
						<text>{{item.feed_create_id}}</text>
					</view>
					<view>
						<text>创建时间</text>
						<text>{{item.feed_create_time}}</text>
					</view> -->
					<view>
						<text>品牌</text>
						<text>{{item.feed_brand}}</text>
					</view>
					<view>
						<text>保质期</text>
						<text>{{item.feed_quantity_time}}</text>
					</view>
					<view>
						<text>饲料使用人</text>
						<text>{{item.feed_people}}</text>
					</view>
					<view>
						<text>使用时间</text>
						<text>{{item.feed_modify_time}}</text>
					</view>
					<view>
						<text>异常情况</text>
						<text>{{item.feed_abnormal_conditions==0?'发霉':item.feed_abnormal_conditions==1?'过期':item.feed_abnormal_conditions==2?'变质':item.feed_abnormal_conditions==3?'无异常':''}}</text>
					</view>
					<view>
						<text>饲料使用人联系方式</text>
						<text>{{item.feed_phone}}</text>
					</view>
				</view>
			</view>
			
			<view class="bottomNone" v-if="isBottom">
				<text>已无更多记录</text>
			</view>
		</template>
		<template v-else-if="isShow === true">
			<xw-empty :isShow="isShow" text="暂无饲料信息" textColor="#777777"></xw-empty>
		</template>	
		<template v-else></template>
	</view>
</template>

<script>
	import feedManagerLine from '../../../components/feedManager-line/feedManager-line.vue';
	import xwEmpty from '../../../components/xw-empty/xw-empty.vue'
	export default {
		data() {
			return {
				inputValue: '',
				number: '',
				isShowModel:false,
				isSearchResultShow: false,
				isSearch: false,
				isBack: false,
				step: 0,
				//关键词搜索出来的结果列表
				searchResult:[],
				//中间列表
				middleList: [],
				
				isBottom: false,
				index:0,
				editor_feed_name: '',//使用饲料
				editor_feed_number: '',//使用量
				editor_feed_abnormal_conditions: '',//异常情况
				editor_feed_phone: '',//饲料使用人联系方式
				editor_feed_id: '',//饲料id
				feedList: [],
				isShow: '',
				person: '',
				farmId: ''
			}
		},
		components: {
			feedManagerLine
		},
		//导航栏按钮点击监听
		onNavigationBarButtonTap:function(value){
			uni.navigateTo({
				url: './disinfection_record'
			})
		},
		methods: {
			//获取用户角色
			getRole(){
				this.person = this.User.userRight.name
				console.log(this.person)
			},
			
			//input里的@input监听输入
			onKeyInput: function(event) {
				this.searchResult = []
					if(event.target.value == ''){
						this.isSearchResultShow == false
						this.isSearch = false
						this.isShowModel = false
					}else{
						this.isSearchResultShow = true
						for(let i = 0; i<this.feedList.length; i++){
							this.number = this.feedList[i].warehouse_serial_number.toString().indexOf(event.target.value)
							if(this.number >= 0) {
								this.searchResult.push(this.feedList[i])
							}
						}
						
						if(this.searchResult.length > 0) {
							this.isSearch = true
						}else{
							this.isSearch = false
						}
						
						this.isShowModel = true
					}
			},
			
			isFocus: function(event) {
				if(event.target.value == ''){
					this.isSearchResultShow = false
				}else{
					this.isShowModel = true
					this.isSearchResultShow = true
					if(this.searchResult.length > 0) {
						this.isSearch = true
					}else{
						this.isSearch = false
					}	
				}
					
			},
			
			noFocus: function(event) {
				setTimeout(() => {
					this.isSearchResultShow = false
					this.isShowModel = false
				},200)
			},
			
			chooseCheck: function(index) {
				//console.log(index)
				this.inputValue = this.searchResult[index].warehouse_serial_number
				this.isBack = true
				this.middleList = []
				this.middleList.push(this.searchResult[index])
				this.step = 1
				this.isBottom = false
			},
			
			toBack() {
				this.middleList = []
				this.isBack = false
				this.inputValue = ''
				this.searchResult = []
				this.isSearch = false
				this.step = 0
				this.init()
			},
			
			//饲料
			init () {
				//console.log(this.farmId)
				this.feedList = []
				uni.request({
					url:this.confige.webUrl+'/livestock/listFeed',
					method: 'GET',
					data:{
						farm_id: this.farmId
					},
					header:{
						"X-Token":this.User.token
					},
					success: (res) => {
						console.log(res)
						if(res.data.result == null || res.data.result.length == 0) {
							this.isShow = true
						}else{
							this.feedList = res.data.result
							this.middleList = this.feedList
							this.isShow = false
						}
					}
				})
			},
			
			//跳转编辑页
			goEditor (index) {
				if(this.person == 'livestock'){
					this.editor_feed_name = this.middleList[index].feed_name
					this.editor_feed_number = this.middleList[index].feed_number
					this.editor_feed_abnormal_conditions = this.middleList[index].feed_abnormal_conditions
					this.editor_feed_phone = this.middleList[index].feed_phone
					this.editor_feed_id = this.middleList[index].feed_id
					//console.log(this.editor_feed_name,this.editor_feed_number,this.editor_feed_abnormal_conditions,this.editor_feed_phone,this.editor_feed_id)
					uni.navigateTo({
						url: './feedEditor'+ 
							'?editor_feed_name=' +this.editor_feed_name +
							'&editor_feed_number=' + this.editor_feed_number +
							'&editor_feed_abnormal_conditions=' + this.editor_feed_abnormal_conditions +
							'&editor_feed_phone=' + this.editor_feed_phone+
							'&editor_feed_id=' + this.editor_feed_id
					})
				}else{
					uni.showToast({
						title: "您不能进行此操作哦!",
						icon: "none"
					})
				}			
			}
		},
		onLoad(option) {
			this.getRole()
			if(this.person === 'government'){
				this.farmId = option.farmId
			}else{
				this.farmId = this.User.userInfo.farm_id
			}
		},
		onShow() {
			this.toBack()
		},
		//监听下拉刷新
		onPullDownRefresh() {
			this.feedList = []
			setTimeout(() => {
				this.toBack()
				uni.stopPullDownRefresh()
			},1000)
		},
		//监听返回键
		onBackPress(e) {
			if(e.from == 'backbutton') {
				if(this.step == 0) {
					return false
				}else{
					this.toBack()
				}
				return true
			}
		},
		//监听触底
		onReachBottom() {
			this.isBottom = true	
		},
	}
</script>

<style lang="less" scoped>
	@import '../../../common/animate.css';
	@import "../../../common/iconfont.css";
	
	page { background: #f8f8f8;}
	
	.pigHouse {
		width: 710rpx;
		height: auto;
		display: flex;
		flex-direction: column;
		border-radius: 40rpx;
		margin: 20rpx 20rpx 40rpx;
		box-shadow: 0rpx 0rpx 10rpx 5rpx #C0C0C0;
	}
	.head {
		display: flex;
		flex-wrap: wrap;
		height: auto;
		justify-content: space-between;
		align-items: center;
		width: 640rpx;
		border-bottom: solid 2rpx #E3E3E3;
		margin-left: 40rpx;
		padding-bottom: 20rpx;
	}
	.footer {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}
	.houseLeft {
		width: 355rpx;
		height: 360rpx;
		text-align: center;
		
		>image {
			width: 280rpx;
			height: 280rpx;
			margin-top: 40rpx;
			border-radius: 30rpx;
		}
	}
	
	.houseRight {
		width: 335rpx;
		height: 260rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding-top: 45rpx;
		padding-bottom: 20rpx;
		font-size: 32rpx;
	}
	
	.remarks {
		display: flex;
		flex-direction: column;
	}
	.remarks>view {
		display: flex; 
		flex-wrap: wrap; 
		justify-content: 
		space-between; 
		margin-left: 40rpx; 
		margin-right: 40rpx; 
		font-size: 30rpx; 
		color: #808080;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.menuModel{
		position: fixed;
		top: 0;
		z-index: 1;
		width: 100vh;
		height: 100vh;
		background-color: rgba(0,0,0,0.2);
		// position: relative;
		.menu{
			z-index: 2;
			position: fixed;
			top:4rpx;
			right:18rpx;
			width: 402rpx;
			height: 344rpx;
			background-image: url(../../../static/qipa.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			display: flex;
			// align-items: center;
			justify-content: center;
			flex-direction: column;
		}
	}
	
	.searchModel{
		width: 80%;
		display: flex;
		flex-direction:row;
		align-items: center;
		justify-content: center;
		padding:5rpx;
		height: 60rpx;
		border: 2rpx solid #4AC997;
		border-radius: 60rpx;
		color: #717171;
		>input{ width: 85%;}
		>text{font-size: 35rpx;}
	}
	
	.dataViewBox {
		position: fixed;
		z-index: 2;
		top: 100rpx;
		width: 750rpx;
		background: white;
		min-height: 100rpx;
		max-height: 600rpx;
		display: flex;
		flex-direction: column;
		//flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		align-content: space-around;
		border-bottom: 1rpx solid #dfdfdf;
	}
	
	.bottomNone {
		width: 750rpx;
		height: 100rpx;
		margin-top: 40rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 28rpx;
		background: #F2F2F2;
		color: #BBBBBB;
	}
</style>
